"use client";
import { memo, useState } from "react";
import type { ReactNode, FC } from "react";
import { shallowEqual } from "react-redux";
import { ConfigProvider, Carousel } from "antd";

import styles from "./style.module.scss";
import { useAppSelector } from "@/store/hooks";
import downloadImg from "@/public/assets/img/sprite_download.png";

interface IProps {
  children?: ReactNode;
}

interface Banner {
  imageUrl: string;
  targetId: number;
  typeTitle: string;
}

const TopBanners: FC<IProps> = (props) => {
  const [currentIndex, setCurrentIndex] = useState(0);
  const { banners } = useAppSelector(
    (state: any) => ({
      banners: state.recommended.banners,
    }),
    shallowEqual
  );
  function handleChange(current: number) {
    setCurrentIndex(current);
  }
  let backgroundImg = banners[currentIndex % banners.length]?.imageUrl;
  if (backgroundImg) {
    backgroundImg += "?imageView&blur=40x20";
  }
  return (
    <ConfigProvider
      theme={{
        components: {
          Carousel: {
            arrowOffset: -50,
            arrowSize: 37,
          },
        },
      }}
    >
      <div
        className={styles.bannersWrapper}
        style={{ backgroundImage: `url(${backgroundImg})` }}
      >
        <div className={`${styles.bannersContent} w980`}>
          <div className={styles.bannersLeft}>
            <Carousel
              className={styles.customCarousel}
              arrows
              infinite={true}
              autoplay
              fade
              afterChange={handleChange}
              dotPosition="bottom"
              autoplaySpeed={5000}
              speed={2000}
            >
              {banners.map((item: Banner) => {
                return (
                  <div className={styles.item} key={item.targetId}>
                    <img src={item.imageUrl} alt={item.typeTitle} />
                  </div>
                );
              })}
            </Carousel>
          </div>
          <div className={styles.bannersRight}>
            <img src={downloadImg.src} alt="" />
          </div>
        </div>
      </div>
    </ConfigProvider>
  );
};

export default memo(TopBanners);
